<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="${basePath }/css/reset.css">
	<link rel="stylesheet" href="${basePath }/css/login.css">
	<style type="text/css">
		body{
			background-image: url(${basePath }/img/lightbg.png);
		}
		.text{
			background-image: url(${basePath }/img/glyphicons-halflings.png);
			background-position: -168px 0;
			background-repeat: no-repeat;
		    display: inline-block;
		    height: 14px;
		    line-height: 14px;
		    margin-top: 13px;
		    vertical-align: text-top;
		    width: 14px;
		}
		.text2{
			background-image: url(${basePath }/img/glyphicons-halflings.png);
			background-position: -72px 0;
			background-repeat: no-repeat;
		    display: inline-block;
		    height: 14px;
		    line-height: 14px;
		    margin-top: 13px;
		    vertical-align: text-top;
		    width: 14px;
		}
		.alert{
			  background-color:#FCF8E3;
			  border:1px solid #FBEED5;
			  border-bottom-left-radius:4px;
			  border-bottom-right-radius:4px;
			  border-top-left-radius:4px;
			  border-top-right-radius:4px;
			  color:#C09853;
			  margin-bottom:20px;
			  padding:8px 35px 8px 14px;
			  text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0;
		}
		.alert .close{
			float:right;
			color:red;
		}
		
	</style>
</head>
<body>
	<section id="signinbg"></section>
        <section id="signinbox">
            <div class="signinboxheader">
                <h1>登陆CRM</h1>
            </div>
            <span id="name-msg" style="color:red;margin-left:20px;"></span><span id="pwd-msg" style="color:red;"></span>
            <br>
            <br>
            <form class="signinboxform" method="post" action="${basePath }/login.action" id="myform">      	
                <hr class="signinboxline">
                <!-- <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='319d5b50248735da82fc4a46aab3aedd' /></div> -->
                <c:if test="${param.code == '10000' }">		
					<div class="alert alert-error">
						<a class="close" data-dismiss="alert" href="#">×</a>
						 用户名或密码错误
					</div>
				</c:if>
                <label class="boxformlabel texticon"><div class="text"></div></label>
                <input class="boxforminput full" type="text" name="user.username" placeholder="用户名" id="username"/>
                
                <label class="boxformlabel texticon"><div class="text2"></div></label>
                <input class="boxforminput full" type="password" name="user.password" placeholder="登录密码" id="password"/>
                <hr class="signinboxline">
                <!-- <input type="hidden" name="next" value="" /> -->
                <button class="boxformsubmitbutton login button blue" type="submit" value="submit" id="btnSumbit">登录</button>
            </form>
        </section>
	<script type="text/javascript">
			function validateName() {
			var name = document.getElementById("username").value;
			if(name.trim().length == 0) {
				return false;
			}
			return true;
		}
		
		function validatePwd() {
			var pwd = document.getElementById("password").value;
			if(pwd == "") {
				return false;
			}
			return true;
		}
	
		document.getElementById("username").onblur = function(){
			var result = validateName();
			if(!result) {
				document.getElementById("name-msg").innerHTML = "用户名不能为空";
			}
		};
		document.getElementById("username").onkeyup = function(){
			document.getElementById("name-msg").innerHTML = "";
		};
	
		document.getElementById("btnSubmit").onclick = function (){
		
			if(!validateName()) {
				alert("用户名不能为空");
				document.getElementById("username").focus();
				return;
			}
			if(!validatePwd()) {
				alert("密码不能为空");
				document.getElementById("password").focus();
				return;
			}
			//通过button按钮来提及表单
			document.getElementById("myform").submit();
			
		};
	
	</script>

</body>
</html>